<template>
	<scroll-view scroll-x class="navbar">
		<view v-for="(item, index) in navbars" :key="index" class="navbar-item" @tap="gotodetails(index)">
			<view class="navbar-item-icon">
				<view :style="{ maskImage: `url(${item.iconUrl})` }" class="navbar-item-icon-img"></view>
			</view>
			<view class="navbar-item-title">
				{{ item.name }}
			</view>
		</view>
	</scroll-view>
</template>

<script>
import { _getPersonalFm } from '@/http/home.js';
export default {
	props: ['navbars'],
	data() {
		return {
			result: []
		};
	},
	onLoad() {
		this.Everyday();
	},
	methods: {
		async getPersonalFm() {
			const { data = [] } = await _getPersonalFm();
			this.result = data;
		},
		// 点击播放
		playMusic(id, index) {
			uni.navigateTo({
				url: '/view/Playmusic/Playmusic?id=' + id
			});
		},

		gotodetails(index) {
			switch (index) {
				case 0:
					uni.navigateTo({
						url: '/view/DailyRecommend/DailyRecommend'
					});
					break;

				case 1:
					uni.navigateTo({
						url: '/view/PrivateFm/PrivateFm?id=' + this.result[0].id
					});
					this.$store.dispatch('playIndex', 0);
					this.$store.dispatch('playMusic', {
						list: this.result,
						index: 0,
						listid: this.result[0].id
					});
					break;

				case 2:
					uni.navigateTo({
						url: '/view/RecommendedSongList/RecommendedSongList'
					});
					break;

				case 3:
					uni.navigateTo({
						url: '/view/TopSort/TopSort'
					});
					break;

				case 5:
					uni.navigateTo({
						url: '/view/DigitalAlbum/DigitalAlbum'
					});
					break;
			}
		}
	},
	mounted() {
		this.getPersonalFm();
	}
};
</script>

<style lang="scss">
.navbar {
	margin-top: 15px;
	height: 180rpx;
	white-space: nowrap;
	border-bottom: 1rpx solid #f3f3f3;
	display: flex;

	&-item {
		display: inline-block;
		margin-left: 30rpx;

		&:last-child {
			margin-right: 30rpx;
		}

		&-title {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 10px;
			padding-top: 5px;
		}

		&-icon {
			width: 95rpx;
			height: 95rpx;
			border-radius: 50%;
			background-color: #fff0f1;
			margin: 0 auto;

			&-img {
				width: 95rpx;
				height: 95rpx;
				background-image: linear-gradient(45deg, #fe393a 70%, #ff8180);
				mask-repeat: no-repeat;
				mask-size: 100%;
				mask-position: 0 0, center;
			}
		}
	}
}
</style>
